<template>
  <van-nav-bar title="登录组件" />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        label="用户名"
        placeholder="用户名"
        v-model="username"
        :rules="check_username"
      />
      <van-field
        label="密码"
        placeholder="密码"
        type="password"
        v-model="password"
        :rules="check_password"
      />
    </van-cell-group>
    <van-button block type="primary" native-type="submit">提交</van-button>
  </van-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from "vue";
const username = ref("");
const password = ref("");

function onSubmit() {
  console.log(username, password);
}

const check_username = ref([{ required: true, message: "必填项1" }]);
const check_password = [{ required: true, message: "必填项2" }];
</script>